<template>
  <div class="login-log-list">
    <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="pa-5">
      <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @search-reset="onSearchReset"
        @refresh-change="onRefresh"
        @selection-change="onSelectionChange"
        @filter-change="onFilterChange"
        @sort-change="onSortChange"
      >
        <template slot="menuLeft" slot-scope="{ size }">
          <el-button type="primary" :size="size" @click="goCreate">新建分享</el-button>
          <el-button type="danger" :size="size" :disabled="!cancleSelect.length" @click="multipleCancle"
            >取消分享</el-button
          >
        </template>
        <template slot="menu" slot-scope="{ size, row }">
          <el-button :size="size" type="text" @click="goDetail(row)">详情</el-button>
          <el-button :size="size" type="text" @click="rowCancle(row)">取消分享</el-button>
        </template>
      </avue-crud>
    </de-container>
  </div>
</template>

<script>
import { sharePage, shareDel } from '@/api/chart/chart'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
// import { DATA_TYPE_OPTIONS } from './index.vue'

export default {
  name: 'ApplyHistory',
  components: { DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      listApi: this.getData,
      cancleSelect: [],
      tableOption: {
        menuWidth: 120,
        menu: true,
        addBtn: false,
        // addText:'新增分享',
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        // delText:'取消分享',
        selection: true,
        index: true,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        column: [
          {
            label: '分享部门',
            prop: 'deptName',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '分享人',
            prop: 'userName',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          // {
          //   label: '申请时效',
          //   prop: 'name',
          //   span: 12,
          //   align: 'left',
          //   search: true,
          //   overHidden: true,
          // },

          {
            label: '分享时间',
            prop: 'createdAt',
            span: 12,
            align: 'left',
            overHidden: true,
          },
        ],
      },
    }
  },
  methods: {
    getData(params) {
      let matrixId = this.$route.params.id
      return sharePage({ ...params, matrixId })
    },
    goDetail(row) {
      this.$router.push(`/redirect/charts/${this.$route.params.id}/share-edit?shareId=${row.id}`)
    },
    goCreate() {
      this.$router.push(`/redirect/charts/${this.$route.params.id}/share-edit`)
    },
    rowCancle(row) {
      this.cancleShare([row.id])
    },
    onSelectionChange(selection) {
      this.cancleSelect = selection.map((item) => item.id)
    },
    multipleCancle() {
      if (!this.cancleSelect.length) return
      this.cancleShare(this.cancleSelect)
    },
    cancleShare(ids) {
      this.$confirm('是否确定撤销分享?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        shareDel({ ids }).then((res) => {
          if (res.success) {
            this.$message.success('撤销分享成功')
            this.onRefresh()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
  },
}
</script>

<style lang="scss"></style>
